<template>
  <van-form @submit="check">
    <van-field
      v-model="business.email"
      name="email"
      label="邮箱"
      placeholder="请输入邮箱"
      readonly
      :rules="[
        {required: true, message: '请输入邮箱'},
        {pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式不正确'}
      ]"
    />

    <van-field
      v-model="vercode"
      name="vercode"
      center
      clearable
      label="短信验证码"
      placeholder="请输入短信验证码"
      :rules="[
        {required: true, message: '请输入短信验证码'}
      ]"
    >
      <template #button>
        <van-button size="small" type="primary" @click="send(business.email)" :disabled="disabled">{{msg}}</van-button>
      </template>
    </van-field>

    <div style="width:50%;margin:2em auto;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
  const {proxy} = getCurrentInstance()

  var business = reactive(
    {
      email:proxy.$business.value.email
    }
  )
  // console.log(business.email)
  let vercode = ref('')
  let msg = ref('发送验证码')
  let disabled = ref(false)

  //邮箱发送
  const send = async (email) => 
  {
    console.log(email)
    msg.value = '正在发送中.....'
    disabled.value = true
    msg.value = 60
    
    var T = setInterval(() => {
      if(msg.value <= 0)
      {
        //停止定时器
        clearInterval(T)
        msg.value = '重新发送验证码'
        disabled.value = false
      }else
      {
        msg.value--
      }
    }, 100)
    var data = {
      'email': email
    }
    var res = await proxy.$POST({
      url:'/business/email',
      params:data
    })
    if(res.code==0){
      proxy.$fild(res.msg);
      return false;
    }

  }

  //邮箱验证
  const check = async (values) =>
  {
    var id = proxy.$business.value.id;
    var data = {
      'email': values.email,
      'code': values.vercode,
      'id' : id
    }
    //发送异步请求
    var result = await proxy.$POST({
        url:'/business/proEmail',
        params:data
    })
    console.log(result)
    if(result.code==0){
      proxy.$fail(result.msg)
      return false
    }
    //成功直接跳转
    proxy.$success({
      message: result.msg,
      duration:1000,
      onClose: () => 
      {
        proxy.$router.go(-1)
      }
    })
  }
</script>